<template>
  <zm-panel title="逾期提成扣减" :visible.sync="value" @change="close">
    <el-form label-width="80px" :model="form" :rules="formRule" ref="form">
      <el-form-item prop="ruleName" label="规则名称:">
        <el-input
          v-model="form.ruleName"
          class="w300"
          placeholder="请输入逾期提成扣减规则名称"
        />
      </el-form-item>
      <el-form-item label="结算方式" prop="settlementType">
        <zm-data-select
          v-model="form.settlementType"
          k1="settlementType"
          placeholder="请选择结算方式"
          class="w300"
        ></zm-data-select>
        <el-tooltip placement="right-start">
          <div slot="content">
            具体结算方式无配置逾期天数，则不产生回款逾期扣减比例<br />
            销售结算：按实际回款金额进行计算提成(建议配置)<br />
            周期结算：按固定的周期天数进行计算提成(建议配置)
          </div>
          <i class="el-icon-question fc-blue"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item prop="customerTypes" label="客户类型">
        <zm-data-select
          v-model="form.customerTypes"
          :list="customerTypeList"
          placeholder="请选择客户类型"
          multiple
          :disabled="!form.settlementType"
          class="w300"
        ></zm-data-select>
      </el-form-item>
    </el-form>
    <rule-table ref="tableForm" v-model="form.ruleContent" @change="onRuleChange"></rule-table>
    <div slot="footer" class="tr">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </zm-panel>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import ruleTable from './table'
import overdueRuleApi from '@/api/src/overdueRule'
const itemModel = { startDay: '', endDay: '', proportion: '' }
export default {
  components: { ruleTable },
  mixins: [panelMixin],
  data () {
    return {
      form: {
        ruleName: '',
        settlementType: [],
        customerTypes: '',
        ruleContent: []
      },
      customerTypeList: [],
      formRule: {
        ruleName: [
          {
            required: true,
            message: '请输入规则名称!'
          }
        ],
        settlementType: {
          required: true,
          message: '请选择结算方式!'
        },
        customerTypes: {
          required: true,
          message: '请选择客户类型!'
        }
      }
    }
  },
  watch: {
    form (val) {
      console.log('form', val)
    },
    async 'form.settlementType' (val) {
      if (val) {
        await this.getCustomerTypes()
        if (!this.handleCustomerTypes()) {
          // 如果已有的值不存在清空
          this.form.customerTypes = []
        }
      }
    }
  },
  mounted () {
    if (this.id) {
      this.getDetail()
    } else {
      const item = { ...itemModel, proportion: '100' }
      this.form.ruleContent = [{...item}]
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
    }
  },
  methods: {
    async getDetail () {
      const res = await overdueRuleApi.detail({ id: this.id })
      console.log(res.customerTypes)
      this.form = {
        ...res,
        customerTypes: res.customerTypes.split(',')
      }
    },
    onRuleChange (e) {
      console.log('input', e)
    },
    handleCustomerTypes () {
      const customerTypeVal = this.form.customerTypes

      console.log('www', this.customerTypeList)
      const allList = this.customerTypeList.map(item => {
        return item.value
      })
      const newList = customerTypeVal.filter(item => {
        return allList.includes(item)
      })
      console.log(newList)
      return newList.length === customerTypeVal.length
    },
    async getCustomerTypes () {
      this.customerTypeList = await overdueRuleApi.getCustomerType({
        id: this.id,
        settlementType: this.form.settlementType
      })
      console.log('ddd', this.customerTypeList)
    },
    async submit () {
      await this.$refs.form.validate()
      await this.$refs.tableForm.validate()
      if (this.id) {
        await overdueRuleApi.update(
          Object.assign({}, this.form, {
            customerTypes: this.form.customerTypes.join(','),
            id: this.id
          })
        )
      } else {
        await overdueRuleApi.create(
          Object.assign({}, this.form, {
            customerTypes: this.form.customerTypes.join(',')
          })
        )
      }

      this.$emit('after-save')
      this.$msg.success()
      this.close()
    }
  }
}
</script>
